/**
 *  学习目标：Todos 案例
 *    1. 函数组件
 *    2. 拆分函数组件(头部，主体，底部)
 *    3. 初始化列表数据，并渲染到主体组件中
 *    4. 主体 - 根据 id 删除数据                              delById
 *    5. 主体 - 根据 id 更新完成状态                          changeDoneById
 *    6. 底部 - 删除已完成任务                                clearDone
 *    7. 底部 - 计算剩余任务数量
 *    8. 底部 - 高亮切换效果                                  changeType
 *    9. 底部 - 切换显示列表(全部显示/未完成/已完成)
 *    10. 头部 - 受控组件，获取数据，按回车键，新增待办任务      addTodo
 *    11. 主体 - 计算全选状态，切换全选状态                     checkAllTodo
 *    12. 组件挂载时 - 获取本地存储数据
 *    13. 数据更新时 - 设置本地存储数据
 */
import React from 'react'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'
import { addTodoAsync, changeDoneById, delById } from './store/action/todo'
import './styles/base.css'
import './styles/index.css'

export default function App() {
  return (
    <section className='todoapp'>
      {/* 头部 */}
      <Header />
      {/* 主体 */}
      <Main />
      {/* 底部 */}
      <Footer />
    </section>
  )
}

function Header() {
  const dispatch = useDispatch()
  const handleAdd = () => {
    // 👍小技巧：通过 debugger 可以看到内部源码如何运行
    debugger
    dispatch(addTodoAsync())
  }
  return (
    <header className='header'>
      <h1>todos</h1>
      <input className='new-todo' placeholder='What needs to be done?' autoFocus />
      <button onClick={handleAdd}>添加一条异步todo</button>
    </header>
  )
}

function Main() {
  // 获取仓库中的 list 数据
  // 🔔 获取 todo 模块里面的 list
  const list = useSelector((state) => state.todo.list)
  const dispatch = useDispatch()
  return (
    <section className='main'>
      <input className='toggle-all' type='checkbox' />
      <label htmlFor='toggle-all'>Mark all as complete</label>
      <ul className='todo-list'>
        {list.map((item) => (
          <li key={item.id} className={item.done ? 'completed' : ''}>
            <div className='view'>
              <input
                className='toggle'
                checked={item.done}
                // onChange={() => dispatch({ type: 'changeDoneById', id: item.id })}
                onChange={() => dispatch(changeDoneById(item.id))}
                type='checkbox'
              />
              <label>{item.content}</label>
              <button
                // onClick={() => dispatch({ type: 'delById', id: item.id })}
                onClick={() => dispatch(delById(item.id))}
                className='destroy'
              ></button>
            </div>
            <input className='edit' />
          </li>
        ))}
      </ul>
    </section>
  )
}

function Footer() {
  return (
    <footer className='footer'>
      <span className='todo-count'>
        <strong>1</strong> item left
      </span>
      <ul className='filters'>
        <li>
          <a className='all selected' href='#/'>
            All
          </a>
        </li>
        <li>
          <a className='active' href='#/active'>
            Active
          </a>
        </li>
        <li>
          <a className='completed' href='#/completed'>
            Completed
          </a>
        </li>
      </ul>
      <button className='clear-completed'>Clear completed</button>
    </footer>
  )
}
